.dialog {
    text-align: center;
    h1 {
        font-size: var(--cxl-size-18);
        margin: 0;
    }
    p {
        font-size: var(--cxl-size-12);
        color: var(--cxl-color-666666);
        margin: var(--cxl-size-6) 0;
    }
}
.login-container {
    box-sizing: border-box;
    background-color: var(--cxl-color-white);
    min-height: 100vh;
    padding: 0 var(--cxl-size-30);
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
    .login-poster {
        margin-top: calc(var(--cxl-size-30) * 2);
        .login-welcome {
            h2 {
                font-size: var(--cxl-size-22);
                font-weight: 600;
            }
            h3 {
                font-size: var(--cxl-size-13);
                color: var(--cxl-color-999999);
                font-weight: normal;
                margin-top: var(--cxl-size-13);
            }
        }
    }
    .login-box {
        box-sizing: border-box;
        margin-top: calc(var(--cxl-size-30) * 2);
    }
    .form {
        margin: var(--cxl-size-16) 0 0 0;
    }
    .retrieve {
        text-align: right;
        font-size: var(--cxl-size-12);
        display: flex;
        justify-content: center;
        position: absolute;
        left: 0;
        width: 100%;
        margin-top: 50%;
        margin-bottom: calc(var(--cxl-size-30) * 2);
        text-align: center;
        span {
            display: flex;
        }
        section {
            color: var(--cxl-color-success);
            // margin-left: var(--cxl-size-6);
        }
    }
    .checkbox {
        font-size: var(--cxl-size-12);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        label {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        i {
            font-style: normal;
            color: var(--cxl-color-success);
            margin-left: var(--cxl-size-6);
        }
    }
    .login {
        margin: 0 0 var(--cxl-size-16) 0;
        .login-btn {
            height: 3rem;
            border-radius: 1.5rem;
            background-color: #c9d5db;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--cxl-size-12);
        }
        > section {
            height: calc(var(--cxl-size-20) + var(--cxl-size-30));
            font-size: var(--cxl-size-18);
            font-weight: 600;
            border-radius: var(--cxl-size-30);
        }
    }

    .register {
        > section {
            color: var(--cxl-color-success);
            height: calc(var(--cxl-size-20) + var(--cxl-size-30));
            border-radius: var(--cxl-size-30);
            border: 1px solid var(--cxl-color-success);
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: var(--cxl-size-18);
            font-weight: 600;
        }
    }
}

.err {
    line-height: var(--cxl-size-22);
    font-size: var(--cxl-size-12);
    min-height: var(--cxl-size-22);
    color: var(--cxl-color-ff5448);
    box-sizing: border-box;
    &.img {
    }
}
